<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <style> .demo{width:100px; height: 100px; background: pink; animation: circle 5s linear infinite; }.running{ animation-play-state: running; }.paused{ animation-play-state:paused; }@keyframes circle{ 0%{ transform: rotate(0deg) }50%{transform: rotate(180deg) }100%{transform: rotate(360deg); } } </style> </head> <body><div id="app"> <div :class="['demo',isPlay?'running':'paused']" > </div> <button @click="handleClick" style="margin-top: 20px;">切换</button>
</div> <script> new Vue({ el:"#app", data:{isPlay:false },methods:{ handleClick(){ if(this.isPlay){ this.isPlay = false; }else{this.isPlay = true; } } } }) </script> </body> </html>